<template>
    <div style="height: 100%;">
        <xnav></xnav>
        <div class="main">
            <b-button variant="light" size="lg" class="bt" v-b-hover="handlehover">click here</b-button>
            <h2 v-if="isHoverd" id="sp" >Surprise,Look Right</h2>
        </div>
    </div>
</template>

<script>
    import xnav from '../components/x-nav.vue';

    export default {
        name: "bs",
        components: {
            xnav
        },
        data() {
            return {
                isHoverd:false,
            }
        },
        methods: {
            handlehover(hoverd){
                    this.isHoverd=hoverd;
            }
        }
    }
</script>

<style scoped lang="less">
    .main {
        width: 100%;
        height: calc(100%);
        background: url("../static/img/1.jpg") no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        .bt{
            position: fixed;
            left: 48%;
            top: 45%;
        }
        #sp{
            position: fixed;
            left: 44%;
            top: 55%;
            animation: dc 300ms ;
            @keyframes dc{
                0%{
                    opacity: 0;
                }
                50%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
        }
    }
</style>